<h4 class="mb-3">1. 响应式表单整体校验</h4>
<form [formGroup]="groupFormControl">
  <p>邮箱校验：<input tiValidation formControlName="emailController" tiText /></p>
  <br />
  <p>邮箱取值：{{ this.groupFormControl.controls.emailController.value }}</p>
  <br />
  <p *ngIf="showRequiredController">非空校验：<input tiValidation formControlName="requiredController" tiText /></p>
  <br />
  <ti-select tiValidation [options]="countries" formControlName="selectControllor" placeholder="请选择国家"></ti-select>
  <br />
  <button class="mt-3 mr-3" (click)="setDefaultEmail()" tiButton color="primary">填入邮箱</button>
  <button class="mt-3 mr-3" (click)="selectDisabled()" tiButton color="primary">启用/禁用表单项</button>
  <button class="mt-3 mr-3" (click)="checkGroupFormControl()" tiButton color="primary">表单整体校验</button>
  <br />
  <button class="mt-3 mr-3" (click)="hideAndCheck()" tiButton color="primary">删除非空输入框</button>
  <button class="mt-3 mr-3" (click)="resetGroup()" tiButton color="primary">重置表单</button>
</form>
<br /><br />
<h4 class="mb-3">2. 模板驱动式表单整体校验</h4>
<form #templateFormControl="ngForm">
  <p>表单项一：<input tiValidation tiEqual="hello tiny" name="templateEqual" [(ngModel)]="templateEqualValue" tiText /></p>
  <br />
  <p>表单项二：<input tiValidation [tiRequired]="true" name="templateRequired" [(ngModel)]="templateRequiredValue" tiText /></p>
  <button class="mt-3" (click)="checkTemplateForm(templateFormControl.form)" tiButton color="primary">表单整体校验</button>
</form>
<br /><br />
<h4 class="mb-3">3. 异步整体校验</h4>
<form [formGroup]="asyncFormGroup">
  <p class="mb-3">同步校验：（非空）</p>
  <input tiValidation formControlName="syncInput" tiText />
  <br /><br />
  <p class="mb-3">异步校验：（2秒后校验，输入 'tiny' 视为通过）</p>
  <input tiValidation formControlName="asyncInput" tiText />
  <br />
  <button class="mt-3" (click)="checkAsyncForm()" tiButton color="primary">表单整体校验</button>
</form>
